//画刻度
drawline($(".line-min"), 60, 85);
drawline($(".line-hour"), 12, 80);

function drawline(wrap, num, translate) {
    var gap = 360 / num;
    for (var i = 0; i < num; i++) {
        var $li = $("<li/>").css({
            "transform": "rotate(" + gap * i + "deg)  translate(" + translate + "px,50%)"
        });
        wrap.append($li);
    }
}

//画表盘数字
drawnumber($('.clocknum'), 12);

function drawnumber(wrap, num) {
    var r = $(".clocknum").width() / 2;//半径
    for (var i = 1; i < num + 1; i++) {
        var radian = (2 * Math.PI / 360) * (i * 30 - 90);//通过角度求弧度  i*30-90是角度
        myX = r * (1 + Math.cos(radian));
        myY = r * (1 + Math.sin(radian));
        var $li = $("<li>" + i + "</li>").css({
            "left": myX + "px",
            "top": myY + "px",
        });
        wrap.append($li);
    }
}

//画指针
setInterval(drawpoint, 1000);
var time = new Date();
var sec = time.getSeconds();
var min = time.getMinutes();
var hour = time.getHours();
var subsec = (360 / 60);//秒针1s旋转6度
var submin = (360 / 3600);//分针1s旋转0.1度
var subhour = (360 / 12 / 3600);//时针1s旋转360/12/3600度

var degsec = (subsec * sec - 90) % 360;//(6*s-90)%360
var degmin = (submin * (min * 60 + sec) - 90) % 360; //(0.1*(m*60+s)-90)360%
var deghour = (subhour * (hour * 3600 + min * 60 + sec) - 90) % 360; //防止超过360度的情况

function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}


function drawpoint() {
    const time = new Date();
    document.getElementById('show_time').innerText = `${dateFormat("YYYY-mm-dd HH:MM:SS", time)}`
    degsec += (360 / 60);
    degmin += (360 / 3600);
    deghour += (360 / 12 / 3600);

    degsec = degsec >= 360 ? 0 : degsec;
    degmin = degmin >= 360 ? 0 : degmin;
    deghour = deghour >= 360 ? 0 : deghour;
    $(".point li.sec").css({
        "transform": "rotate(" + degsec + "deg)"
    });
    $(".point li.min").css({
        "transform": "rotate(" + degmin + "deg)"
    });
    $(".point li.hour").css({
        "transform": "rotate(" + deghour + "deg)"
    });
}